<template>
    <div class="box">
        <div class="dfy">
            <div class="fy">
                <div class="fy">
                    <el-button @click="one"><el-icon>
                            <DArrowLeft />
                        </el-icon></el-button>
                    <el-button @click="up"><el-icon>
                            <ArrowLeft />
                        </el-icon></el-button>

                    <el-select @change="pageChange" v-model="selectVal" placeholder="Select" size="large"
                        style="width: 140px; height:33px;border: 0;min-height: 33px">
                        <el-option v-for="item in pageList" :key="item.key" :label="item.label" :value="item.value" />
                    </el-select>

                    <el-button @click="bottom"><el-icon>
                            <ArrowRight />
                        </el-icon></el-button>
                    <el-button @click="after"><el-icon>
                            <DArrowRight />
                        </el-icon></el-button>
                </div>
                <el-button style="margin-left: 10px;" @click="sx"><el-icon>
                        <Refresh />
                    </el-icon></el-button>
            </div>
            <span><span>共计录{{ tatol }}条</span> &nbsp;每页<input type="number" class="in" v-model="pagesize">条</span>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, Ref, ref,defineProps } from 'vue'
let x = defineProps(['name'])


import axios from 'axios';
axios.defaults.baseURL = "http://127.0.0.1:3000/mine"
let up = () => {
    page.value -= 1
    getdata()
}
let bottom = () => {
    page.value += 1
    getdata()
}

let one = () => {
    page.value = 1
    getdata()
}
let sx = () => {
    getdata()
}
let after = () => {
    page.value = Math.ceil(tatol.value / pagesize.value)
    getdata()
}
let page: Ref<number> = ref(1)
let pagesize: Ref<number> = ref(5)
let tatol: Ref<number> = ref(0)

const selectVal = computed(() => {
    return `第${page.value}页/共${Math.ceil(tatol.value / pagesize.value)}页`
})
const pageList = computed(() => {
    let arr = []
    for (let i = 1; i <= Math.ceil(tatol.value / pagesize.value); i++) {
        arr.push({
            key: i,
            label: `第${i}页`,
            value: i
        })
    }
    return arr
})
const pageChange = (val: any) => {
    page.value = val
    getdata()
}
let tableData = ref([])
let getdata = () => {

    axios.get(`/${x.name}?page=${page.value}&pagesize=${pagesize.value}`).then(res => {
        
        localStorage.setItem('data',JSON.stringify(res.data.data))
        tableData.value = res.data.data
        tatol.value = res.data.tatol
    })
}
onMounted(() => {
    getdata()
})

defineExpose({tableData})
</script>

<style  >
.el-select--large .el-select__wrapper {
    font-size: 14px;
    gap: 6px;
    line-height: 24px;
    min-height: 32px;
    padding: 8px 16px;
}

.in {
    width: 40px;
    text-align: center;
    height: 24px;
    border: 1px #dddddd solid;
    margin: 0px 2px;
    font-size: 12px;
}


.dfy {
    display: flex;
    justify-content: space-between;
}

.box {
    height: 100vh;
    width: 100%;
    background-color: #fff;
    padding: 20px;
}

.el-button+.el-button {
    margin-left: 0;
}

.table {
    text-align: center;
}

.fy {
    display: flex;
}

.buts {
    display: flex;
    justify-content: space-between;
    align-content: center;
    margin-bottom: 20px;
}
</style>